<template>
    <!-- 插值指令：将页面显示的文本内容与响应式变量的值进行绑定
    如果修改响应式变量的值，页面显示文本也会随之改变-->
    <h1>我是第一个页面</h1>
    <span>{{info}}</span>
    {{info+'好nm'}}
    <button @click="f">是兄弟就来点我</button>
    <hr>
<!--  {{}}是v-text指令的简写形式，将响应式变量的值以文本形式直接数据绑定显示在页面上  -->
    <p>{{aaa}}</p>
    <p v-text="aaa"></p>
<!--  v-html指令也是数据绑定，但若值中有html标签，会渲染出html标签的效果  -->
    <p v-html="aaa"></p>
</template>


<script setup>
    import {ref} from "vue";

    //1.定义响应式变量
    const info = ref('我是info');
    //2.定义箭头函数
    const f = () => {
        console.log('点击了按钮');
        //使用响应式变量的值，注意：在JS中使用响应式变量的值，必须.value!
        console.log(info.value);
        info.value = '我是修改后的info';
    }
    const aaa = ref('我是aaa，展示<mark>高亮</mark>效果')


</script>


<style scoped>

</style>